
<canvas id="myCanvas" app-canvas-bg></canvas>
<div class="login-container" [ngStyle]="{'width.px':winHw.width,'height.px':winHw.height}">

  <div class="item-in">
    <div class="bg-mask"></div>
    <ng-container *ngIf="loginBool">
      <form nz-form [formGroup]="validateForm" class="login-form animated bounceInLeft" (ngSubmit)="submitForm()">
        <nz-form-item>
          <div class="login-title">An管理器</div>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzHasFeedback nzErrorTip="请输入有用户名!">
            <nz-input-group nzPrefixIcon="user">
              <input type="text" nz-input formControlName="userName" placeholder="用户名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzHasFeedback nzErrorTip="请输入登录密码!">
            <nz-input-group nzPrefixIcon="lock">
              <input type="password" nz-input formControlName="password" placeholder="密码" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <label nz-checkbox formControlName="remember">
              <span>记住我</span>
            </label>
            <a class="login-form-forgot" class="login-form-forgot" (click)="forgetPass()">忘记密码</a>
            <button nz-button class="login-form-button" [disabled]="!validateForm?.valid" [nzType]="'primary'">登 录</button>
            <a (click)="registerUser()">注册</a>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <span class="third-party-tip">第三方：</span>
          <i class="third-party" nz-icon nzType="weibo-circle" nzTheme="outline"></i>
          <i class="third-party" nz-icon nzType="wechat" nzTheme="outline"></i>
          <i class="third-party" nz-icon nzType="github" nzTheme="outline"></i>
        </nz-form-item>
      </form>
    </ng-container>

    <ng-container *ngIf="registerBool">
      <div class="animated bounceInRight delay-0s">
        <app-user-register (loginEvent)="goLogin()"></app-user-register>
      </div>
    </ng-container>
    <ng-container *ngIf="forgetBool">
      <div class="animated bounceInRight delay-0s">
        <app-forget-password (loginEvent)="goLogin()"></app-forget-password>
      </div>

    </ng-container>

  </div>



</div>
